<title>图标时间轴</title>

<link rel="stylesheet" href="/vendor/plyr/plyr.css">

<div class="page animation-fade">
    <div class="page-header page-header-bordered">
        <h1 class="page-title">图标时间轴</h1>
        <div class="page-header-actions">
            <form>
                <div class="input-search input-search-dark">
                    <i class="input-search-icon wb-search" aria-hidden="true"></i>
                    <input type="text" class="form-control" name="" placeholder="搜索...">
                </div>
            </form>
        </div>
    </div>
    <div class="page-content container">

        <ul class="timeline timeline-icon">
            <li class="timeline-period">2016年9月</li>
            <li class="timeline-item">
                <div class="timeline-dot">
                    <i class="icon wb-image" aria-hidden="true"></i>
                </div>
                <div class="timeline-info">
                    <time datetime="2016-05-15">2 天前</time>
                </div>
                <div class="timeline-content">
                    <div class="widget widget-article widget-shadow">
                        <div class="widget-header cover">
                            <img class="cover-image" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2016/09/3050771-poster-p-1-rebecca-minkoff-takes-fashion-tech-to-the-next-level-with-vr-headsets.jpg" alt="...">
                        </div>
                    </div>
                </div>
            </li>
            <li class="timeline-item timeline-reverse">
                <div class="timeline-dot bg-green-500">
                    <i class="icon wb-file" aria-hidden="true"></i>
                </div>
                <div class="timeline-info">
                    <time datetime="2016-05-15">2 天前</time>
                </div>
                <div class="timeline-content">
                    <div class="widget widget-article widget-shadow">
                        <div class="widget-header cover">
                            <img class="cover-image" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2016/09/drone4-1.jpg" alt="...">
                        </div>
                        <div class="widget-body padding-20">
                            <h3 class="widget-title">【独家】这两架无人机，有望打破“大疆”魔咒？</h3>
                            <p class="widget-metas">
                                <span class="widget-time">1 小时前</span>
                            </p>
                            <p>上周刚写完“无人机的展望（点击查看）”，结果前两天爱范儿就“收到”了一个“特殊”的小视频。在其中，我仿佛看见了“下一个大疆”的身影。</p>
                            <div class="widget-body-footer">
                                <div class="widget-actions pull-right">
                                    <a href="javascript:;"><i class="icon wb-chat-working" aria-hidden="true"></i>
                                        <span>2500</span></a>
                                    <a href="javascript:;">
                                        <i class="icon wb-heart" aria-hidden="true"></i> <span>20</span></a>
                                </div>
                                <a class="btn btn-primary btn-outline widget-readmore" href="javascript:;">更多</a>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li class="timeline-item">
                <div class="timeline-dot bg-orange-500">
                    <i class="wb-quote-right"></i>
                </div>
                <div class="timeline-info">
                    <time datetime="2016-05-08">9 天前</time>
                </div>
                <div class="timeline-content">
                    <div class="widget widget-article widget-shadow">
                        <div class="widget-header cover">
                            <div class="cover-background padding-30" style="background-image: url('http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2016/09/33.jpg')">
                                <blockquote class="cover-quote white">9 月 7 日，戴尔在官网宣布已经完成对 EMC 公司的收购。据华尔街日报报道，这笔收购的价格约为
                                    600 亿美元，是科技界史上价格最高的一起收购案例。
                                </blockquote>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li class="timeline-period">2016年8月</li>
            <li class="timeline-item">
                <div class="timeline-dot bg-green-500">
                    <i class="icon wb-file" aria-hidden="true"></i>
                </div>
                <div class="timeline-info">
                    <time datetime="2016-04-08">1 月前</time>
                </div>
                <div class="timeline-content">
                    <div class="widget widget-article widget-shadow">
                        <div class="widget-header cover">
                            <img class="cover-image" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2016/09/DSC09563.jpg" alt="...">
                        </div>
                        <div class="widget-body">
                            <h3 class="widget-title">Apple Watch Series 2 上手</h3>
                            <p class="widget-metas">
                                <span class="widget-time">2016年8月8日</span>
                            </p>
                            <p>两年前发布时，价格令人咋舌的黄金版 Apple Watch，最终还是没有在昨晚的发布会中得到更新。放弃了纯金的奢侈路线，这一次，苹果把手里的牌全砸在了运动健康上。</p>
                            <div class="widget-body-footer">
                                <div class="widget-actions pull-right">
                                    <a href="javascript:;"><i class="icon wb-chat-working" aria-hidden="true"></i>
                                        <span>2500</span></a>
                                    <a href="javascript:;">
                                        <i class="icon wb-heart" aria-hidden="true"></i> <span>20</span></a>
                                </div>
                                <a class="btn btn-primary btn-outline" href="javascript:;">更多</a>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li class="timeline-item timeline-reverse">
                <div class="timeline-dot bg-orange-600">
                    <i class="wb-quote-right"></i>
                </div>
                <div class="timeline-info">
                    <time datetime="2016-04-08">1 月前</time>
                </div>
                <div class="timeline-content">
                    <div class="widget widget-article widget-shadow">
                        <div class="widget-header cover">
                            <div class="cover-background padding-30" style="background-image: url('http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2016/09/138122664.png')">
                                <blockquote class="cover-quote white">如今，据外媒 MSPoweruser 报道，这个项目已经被命名为 Skype Teams，它将成为
                                    Slack 的直接竞争者。
                                </blockquote>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li class="timeline-item timeline-reverse">
                <div class="timeline-dot bg-cyan-600">
                    <i class="icon wb-video" aria-hidden="true"></i>
                </div>
                <div class="timeline-info">
                    <time datetime="2016-04-08">1 月前</time>
                </div>
                <div class="timeline-content">
                    <div class="widget widget-article widget-shadow">
                        <div class="widget-header cover plyr">
                            <video poster="/images/poster.jpg" controls crossorigin>

                                <source type="video/mp4" src="https://cdn.selz.com/plyr/1.0/movie.mp4">
                                <source type="video/webm" src="https://cdn.selz.com/plyr/1.0/movie.webm">

                                <track kind="captions" label="English" srclang="en" src="//cdn.selz.com/plyr/1.0/en.vtt" default>

                                <a href="https://cdn.selz.com/plyr/1.0/movie.mp4">下载</a>
                            </video>
                        </div>
                    </div>
                </div>
            </li>
        </ul>

    </div>
</div>

<script src="/vendor/jquery-appear/jquery.appear.min.js" data-name="appear"></script>
<script src="/vendor/plyr/plyr.min.js" data-name="plyr"></script>
<script src="/js/examples/components/structure/timeline.js" data-deps="[appear, plyr]"></script>
